import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { Button } from 'antd';


function list({ list, dispatch }) {
    function deleteEmployee(targetKey) {
        dispatch({
            type: 'deleteEmployee',
            payload: {
                key: targetKey
            }
        });
    }

    return <div>
        <table width='1000px'>
            <thead>
                <tr>
                    <td colSpan='2'>Name</td>
                    <td rowSpan='2'>Age</td>
                    <td rowSpan='2'>Address</td>
                    <td rowSpan='2'>Tags</td>
                    <td rowSpan='2'>Action</td>
                </tr>
                <tr>
                    <td>First Name</td>
                    <td>Last Name</td>
                </tr>
            </thead>
            <tbody>
                {list.map((employee, index) => (
                    <tr key={index}>
                        <td>{employee.firstName}</td>
                        <td>{employee.lastName}</td>
                        <td>{employee.age}</td>
                        <td>{employee.address}</td>
                        <td>{employee.tags}</td>
                        <td>
                            <Link to={'/employee/' + employee.key}>Edit {employee.lastName}</Link>
                            <Button onClick={() => deleteEmployee(employee.key)}>delete</Button>
                        </td>
                    </tr>
                ))}
            </tbody>
        </table>
    </div >
}

export default connect(model => {
    return {
        list: model.list
    }
})(list);